<template>
  <div ref="mapboxBox" class="absolute inset-0"></div>
</template>

<script setup>
import { ref, onMounted, defineExpose } from "vue";
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl";

const mapboxBox = ref(null);
const mapboxPara = {
  map: null,
};

mapboxPara.cameraPosition = function () {
  console.log("经度" + mapboxPara.map.getCenter().lng);
  console.log("纬度" + mapboxPara.map.getCenter().lat);
  console.log("高度" + mapboxPara.map.getZoom());
  console.log("偏航" + mapboxPara.map.getBearing());
  console.log("俯仰" + mapboxPara.map.getPitch());
};

function init() {
  mapboxgl.accessToken =
    "pk.eyJ1Ijoic2hlbnpoaXFpYW5nIiwiYSI6ImNsNWczdzVpNTBkeTMzYm8zbG1xdmF4NGEifQ.cnmmqqNT5vPDEvH_c0X2DQ";
  let map = new mapboxgl.Map({
    container: mapboxBox.value,
    center: [128.0542539276761, 42.010308688466495],
    zoom: 13.720812481214525,
    bearing: 172.8392290144218,
    pitch: 71.92570595843968,
    style: "mapbox://styles/mapbox/satellite-streets-v11",
  });
  mapboxPara.map = map;

  map.on("load", () => {
    map.addSource("mapbox-dem", {
      type: "raster-dem",
      url: "mapbox://mapbox.mapbox-terrain-dem-v1",
      tileSize: 512,
      maxzoom: 14,
    });
    map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });

    map.setFog({
      "horizon-blend": 0.3,
      color: "#f8f0e3",
      "high-color": "#add8e6",
      "space-color": "#d8f2ff",
      "star-intensity": 0.0,
    });
  });
}

onMounted(() => {
  init();
});

defineExpose({
  mapboxPara,
});
</script>

<style>
.mapboxgl-ctrl-bottom-left {
  display: none !important;
}

.mapboxgl-ctrl-bottom-right {
  display: none !important;
}
</style>
